<script setup="ts">
definePageMeta({
  layout: "flat",
})

useHead({
  title: 'HLS: Расписание',
})

const urlHome = useUrlRasp();
const codeOtd = ref(0);

const userSearch = ref('');

const {pending, data: users, error} = await useLazyFetch(`${urlHome.value}rasp/`)

const {data: listOtd, execute, refresh} = await useLazyFetch(`${urlHome.value}rasp/list_otd`, {
  query: {
    otd: codeOtd
  }
})

const filtered = computed(() => users.value.filter((user) => user.fam.toLowerCase().indexOf(userSearch.value.toLowerCase()) >= 0))
</script>

<template>
  <div>
    <h1></h1>
    <br>
    <h1>Меню</h1>
    <br>
    <ul>
      <li class="pb-2">
        <NuxtLink to="/menu">
          <UButton>Меню</UButton>
        </NuxtLink>
      </li>
    </ul>
    <ul>
      <li class="pb-2">
        <NuxtLink to="/rasp/raspnewedit">
          <UButton>Добавить расписание</UButton>
        </NuxtLink>
      </li>
    </ul>
    <UInput @change="execute" v-model="codeOtd" label="Номер отделения"/>
    {{ codeOtd }}
    <!-- <div v-if="listOtd.length() === 1">
      <div>Номер отделения: {{ listOtd.id }}, Название {{ listOtd.name_otd }}</div>
    </div> -->
    <ul>
      <li v-for="otd in listOtd">
      {{ otd }}
    </li>
    </ul>
    <UInput v-model="userSearch" label="Имя пользователя" />
    <div v-if="pending">Loading...</div>
    <div v-else>
      <ul>
        <li v-for="user in filtered">
          <div>{{user.fam}} {{user.im}} {{user.ot}}</div>
        </li>
      </ul>
    </div>

  </div>
</template>
